<template>
  <view class="page-project">
    <view class="top">
      <image src="~@/static/images/project/header01.png" alt="" class="top-img" mode="aspectFit" />
      <view class="tabsbox">
        <view class="tabs" id="tabsContainer">
          <view class="tabs-item" :id="`tab-item-${i}`" :class="[{ 'is-active': v.id === currentTab }]" v-for="(v, i) in projectCates" :key="v.id" @click="handleChangeTab(v, i)">
            {{ v.name }}
          </view>
        </view>
      </view>
    </view>
    <view class="project-main">
      <view class="project-item" v-for="(item, index) in projectList" :key="index" @click="handleGoProjectDetail(item)">
        <view class="item-top">
          <view class="item-avatar">
            <image :src="`${imgUrl}${item.doctor.avatar}`" alt="" class="avatar-img" mode="aspectFill" />
            <view class="name">{{ item.doctor.doctorName }}</view>
          </view>
          <view class="item-info">
            <view class="info-title">{{ item.title }} </view>
            <view class="info-desc">{{ item.subTitle }}</view>
            <view class="info-commission">
              <view class="label">{{ $t('index.项目提成') }}:</view>
              <view class="value">{{ item.pencent }}%</view>
            </view>
            <view class="info-time">{{ item.createdAt }}</view>
          </view>
          <view class="item-btn">{{ $t('project.预约') }}</view>
        </view>
        <view class="item-footer">
          <view>{{ item.price }}</view>
          <view>($)</view>
        </view>
      </view>
      <uni-load-more :status="more" :contentText="{ contentdown: $t('common.上拉显示更多'), contentrefresh: $t('common.正在加载'), contentnomore: $t('common.没有更多数据了') }" @clickLoadMore="loadMore"></uni-load-more>
    </view>
  </view>
</template>
<script>
  import { projectList } from '@/api/home.js'
  import { projectCates } from '@/api/project.js'
  import config from '@/config'

  export default {
    data() {
      return {
        projectCates: [],
        currentTab: 0,
        projectList: [],
        page: 1,
        limit: 30,
        more: 'more',
        imgUrl: config.imgUrl
      }
    },
    onPullDownRefresh() {
      this.projectList = []
      this.page = 1
      this.more = 'more'
      this.getProjectCates()
      uni.stopPullDownRefresh()
    },
    methods: {
      // 切换tab
      handleChangeTab(item, i) {
        this.currentTab = item.id
        const container = document.querySelector('#tabsContainer')
        const targetTab = document.querySelector(`#tab-item-${i}`)
        const elementLeft = targetTab.offsetLeft
        const elementWidth = targetTab.offsetWidth
        const targetScrollLeft = elementLeft - (container.clientWidth - elementWidth) / 2
        container.scrollTo({
          left: targetScrollLeft,
          behavior: 'smooth'
        })
        this.projectList = []
        this.page = 1
        this.more = 'more'
        this.getProjectList()
      },
      //项目详情
      handleGoProjectDetail(item) {
        this.$tab.navigateTo(`/pages/project/detail?id=${item.id}`)
      },
      //获取项目类别
      getProjectCates() {
        projectCates().then((res) => {
          let { data } = res.result
          this.projectCates = data || []
          this.projectCates.unshift({
            id: 0,
            name: this.$t('common.全部')
          })
          this.currentTab = this.projectCates?.[0].id
          this.getProjectList()
        })
      },
      //获取项目列表
      getProjectList() {
        this.$modal.loading('loading', 'loading')
        let par = {
          is_recommend: 0,
          cate_id: this.currentTab,
          page: this.page,
          limit: this.limit
        }
        projectList(par)
          .then((res) => {
            let { data } = res.result
            let { total, records } = data
            this.projectList.push(...records)
            if (total == this.projectList.length) {
              this.more = 'noMore'
            } else {
              this.more = 'more'
            }
            this.$modal.closeLoading()
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      },
      loadMore(e) {
        if (this.more == 'noMore') return
        this.more = 'loading'
        this.page++
        this.getProjectList()
      }
    },
    created() {
      this.getProjectCates()
    }
  }
</script>
<style scoped lang="scss">
  .page-project {
    .top {
      position: fixed;
      top: 0;
      left: 0;
      height: 328px;
      width: 100vw;
      z-index: 99;
      .top-img {
        width: 100%;
        height: 282px;
        background: #d4e7f8;
      }
      .tabsbox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100vw;
        background-color: #fff;
        overflow: hidden;
        padding: 10px 10px 0;
        .tabs {
          width: 100%;
          overflow-x: auto;
          display: flex;
          align-items: center;
          flex-wrap: nowrap;
          padding-bottom: 10px;
          .tabs-item {
            background: rgb(223, 223, 223);
            border-radius: 100px;
            color: #fff;
            padding: 5px 15px;
            display: flex;
            white-space: nowrap;
            margin-right: 10px;
            font-size: 15px;
            padding: 5px 15px;
            &.is-active {
              background: #30c5d7;
              position: relative;
              &::before {
                content: '';
                position: absolute;
                bottom: -6px;
                left: 50%;
                transform: translateX(-50%);
                width: 20px;
                height: 2px;
                background-color: #30c5d7;
              }
            }
          }
        }
      }
    }
    .project-main {
      margin-top: 328px;
      padding-bottom: 30px;
      padding-left: 10px;
      padding-right: 10px;
      .project-item {
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        .item-top {
          display: flex;
          align-items: center;
          .item-avatar {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 88px;
            min-height: 88px;
            .avatar-img {
              width: 60px;
              height: 60px;
            }
            .name {
              font-size: 24rpx;
              margin-top: 8rpx;
            }
          }
          .item-info {
            flex: 1;
            overflow: hidden;
            font-size: 24rpx;
            .info-title {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #101010;
              font-size: 28rpx;
            }
            .info-desc {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #999;
              margin-top: 10rpx;
            }
            .info-commission {
              display: flex;
              align-items: center;
              margin-top: 10rpx;
              .label {
                color: #666;
              }
              .value {
                color: #d3955c;
              }
            }
            .info-time {
              margin-top: 10rpx;
              color: #666;
            }
          }
          .item-btn {
            height: 28px;
            line-height: 28px;
            border-radius: 13px;
            text-align: center;
            color: #fff;
            background-color: #31b2b5;
            margin-left: 20rpx;
            padding: 0 40rpx;
          }
        }
        .item-footer {
          display: flex;
          justify-content: flex-end;
          margin: 10rpx 0;
          font-size: 28rpx;
          color: #d3955c;
        }
      }
      .empty {
        font-size: 32rpx;
        color: #101010;
        height: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
